<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="main" style="width: 600px;height: 400px"></div>
<script src="../echarts/dist/echarts.min.js"></script>
</body>
<script>
    var mychart=echarts.init(document.getElementById('main'));
    option={
        title:{
            text:'收入支出对比',
            left:'5px'
        },
        tooltip:{
            trigger:'axis',
            axisPointer:{
                type:'shadow'
            }
        },
        legend:{
            data:['利润','支出','收入']
        },
        grid:{
            left:'3%',
            right:'4%',
            bottom:'3%',
            containLabel:true
        },
        xAxis:[
            {
                type:'value'//为value属性的标示这个轴跟数据相同===
            }
        ],
        yAxis:[
            {
                type:'category',
                axisTick:{show:false},
                data:['周一','周二','周三','周四','周五','周六','周日']
            }
        ],
        series:[
            {
                name:'利润',
                type:'bar',
                label:{
                    normal:{
                        show:true,
                        position:'inside'
                    }
                },
                data:[200,170,240,244,200,220,210]
            },
            {
                name:'收入',
                type:'bar',
                stack:'总量',//这个输入一致的会出现在同一列或者同一行=====
                label:{
                    normal:{
                        show:true,
                        position:'right'
                    }
                },
                data:[320,302,341,374,390,450,420]
            },
            {
                name:'支出',
                type:'bar',
                stack:'总量',
                label:{
                    normal:{
                        show:true,
                        position:'left'
                    }
                },
                data:[-120,-132,-101,-134,-190,-230,-210]
            }
        ]
    }
    mychart.setOption(option);
</script>
</html>